<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

    <li id="no-data-li" th:if="${#lists.isEmpty(dataMap['list'])}">
        <section class="no-data__wrap">
            <em>&nbsp;</em>
            <p>亲，今日没有免费直播~~~</p>
        </section>
    </li>

    <span th:if="!${#lists.isEmpty(dataMap['list'])}" th:each="open:${dataMap['list']}">
        <li class="item-content" th:classappend="${open['playStatus']==2}?'lecture-liveing':''">
            <a href="javascript:void(0)">
                <div class="item-media">
                    <span class="lecture-icon">
                        <em class="iconfont icon-zhibofuben"></em>
                    </span>
                </div>
                <div class="item-inner">
                    <div class="item-title" th:attrappend="data-open=${open['id']}">
                        <span class="lecture-time">
                            <span th:text="${#strings.substring(open['openTime'],11)}"></span> -
                            <span th:text="${#strings.substring(open['endTime'],11)}"></span>
                        </span>
                        <section class="wm-desc-wrap" th:text="${open['courseName']}"></section>
                        <section class="wm-attr-wrap row">
                            <aside class="col-auto">
                                <img th:attr="data-src=${open['teacher']['imageMap']['mobileUrlMap']['large']}" th:src="@{{path}/front/mobile/v3/img/default/default-face.jpg(path=${staticPath})}" class="wm-pic-round" width="18" height="18" th:alt="${open['teacher']['teacherName']}">
                                <span class="wm-txt-small" th:text="${open['teacher']['teacherName']}"></span>
                            </aside>
                            <aside class="col-auto pl5">
                                <span class="wm-attr-ico"><em class="iconfont icon-home-1"></em></span>
                                <span class="wm-txt-small" th:text="${open['bespeakNum']}"></span>
                            </aside>
                        </section>
                    </div>
                    <div class="item-after">
                        <section class="wm-item-picture__wrap pr">
                            <aside class="wm-item-picture-btn">
                                <span class="button button-fill button-warning button-round bespeak-btn" th:attrappend="data-id=${open['id']}" th:if="${open['playStatus']} == 2 and !${open['reservation']}">可预约</span>
                                <span class="button button-fill button-warning button-round" th:attrappend="data-open=${open['id']}" th:if="${open['playStatus']} == 2 and ${open['reservation']}">已预约</span>
                                <span class="button button-fill button-danger button-round" th:attrappend="data-open=${open['id']}" th:if="${open['playStatus']} == 1">观看直播</span>
                                <span class="button button-fill button-info button-round" th:attrappend="data-open=${open['id']}" th:if="${open['playStatus']} == 3 and ${open['replay']} == 2">查看回放</span>
                                <span class="button button-fill button-primary button-round" th:if="${open['playStatus']} != 1 and ${open['playStatus']} != 2 and ${open['replay']} != 2">已结束</span>
                            </aside>
                            <img class="wm-img" th:attr="data-src=${open['teacher']['imageMap']['mobileUrlMap']['large']}" th:src="@{{path}/front/mobile/v3/img/default/default-face.jpg(path=${staticPath})}" th:alt="${open['teacher']['courseName']}">
                        </section>
                    </div>
                </div>
            </a>
        </li>
    </span>
    <input type="hidden" id="totalPages" th:value="${dataMap['pages']}"/>
    <input type="hidden" id="currentPage" th:value="${dataMap['pageNum']}"/>
</html>